<template>
    <div>
        <component
            :is=compName
            v-bind:on-mouse-over-port="onMouseOverPort"
            v-bind:on-mouse-out-port="onMouseOutPort"
            v-bind:on-click-port="onClickPort"
            v-bind:sub-boards="subBoards"
        ></component>

        <div class="port-tips" :style=portTipsStyle>
            <span>端口：{{portTips}}</span>
            <!--<span v-for="item in nodeMenuList" :style="{left:`${item.left}px`, top:`${item.top}px`}">-->
                <!--<a-tooltip :title="item.title">-->
                    <!--<a-icon @click.stop=runNodeMenu(item.action) :type="item.icon"/>-->
                <!--</a-tooltip>-->
            <!--</span>-->
        </div>
    </div>
</template>

<script>
    import AR1220 from './device/AR1220';
    import AR2204 from './device/AR2204';
    import AR2240 from './device/AR2240';

    export default {
        name: "RT_BOARD",
        components: {
            AR1220,
            AR2204,
            AR2240,
        },
        data() {
            return {
                portTipsStyle: null,
                portTips: "",
                compName: "AR2204",
                subBoards: [
                    // AR2240
                    // {name: "SRU40", slot: 11},
                    // {name: "PWR350A", slot: 9},
                    // {name: "8FE1GE", slot: 4},
                    // {name: "8FE1GE", slot: 2},
                    // AR2204
                    {name: "8FE1GE", slot: 4},
                    {name: "8FE1GE", slot: 2},
                    // AR1220
                    // {name: "4ES2GP-S", slot: 1},
                    // {name: "4ES2GP-S", slot: 2},
                ]
            }
        },
        created() {
        },
        methods: {
            onMouseOverPort(port, ev) {
                //console.log(">>> MouseOver ", port, ev)
                this.showPortTips(port, ev.event.clientX, ev.event.clientY);
            },
            onMouseOutPort(port, ev) {
                //console.log(">>> MouseOut ", port, ev)
                this.hidePortTips();
            },
            onClickPort(port, ev) {
                console.log(">>> Click ", port, ev)
            },
            // 显示节点菜单
            showPortTips(port, x, y) {
                this.portTips = port;
                this.portTipsStyle = {
                    left: (x + 11) + "px",
                    top: y + "px",
                    display: "block"
                };
            },
            // 隐藏节点菜单
            hidePortTips() {
                this.portTipsStyle = {
                    display: "none"
                };
            },
        }
    }
</script>

<style>
    .port-tips {
        position: absolute;
        left: 0;
        top: 0;
        padding: 7px 11px;
        color: #eee;
        width: 350px;
        height: 100px;
        background: rgba(9, 9, 9, 0.75);
        border-radius: 5px;
        z-index: 10;
        display: none;
    }
</style>